Ext.namespace("Milan.widget");
/**
 * 引用时select样式必须设置为 class="selectChoose"
 * selectWidth :不设置时为auto
 * onchange事件暂不支持传参数
 */
Milan.widget.SelectChoose = {
	init : function(id)
	{
		if(id){
			this.id = id;
		}else{
			this.id = "input_" + new Date().getTime();
		}
		this.isIE=Milan.navigator.isIE;
		this.name = this.id;
		this.divClassName="";
		this.width=0;
		this.top=40;
		this.poPDivClassName="";
		this.boxDivClassName="";
		this.listDivClassName="";
		this.onChangeEvent = "";
		this.setId=function(id){this.id=id};
		this.setName=function(name){this.name=name};
		this.setTop=function(top){this.top=top};
		this.setDivClassName=function(divClassName){this.divClassName=divClassName};
		this.setPoPDivClassName=function(poPDivClassName){this.poPDivClassName=poPDivClassName};
		this.setBoxDivClassName=function(boxDivClassName){this.boxDivClassName=boxDivClassName};
		this.setListDivClassName=function(listDivClassName){this.listDivClassName=listDivClassName};
		this.setWidth=function(width){this.width=parseInt(width);};
		this.setTitle=function(title){this.title=title};
		this.setOnChangeEvent=function(changeEvent){this.onChangeEvent=changeEvent};
		this.setPlaceholder=function(placeholder){this.placeholder=(typeof placeholder == "string")?$(placeholder):placeholder;};//设置占位元素
		this.getDiv=function(){return this.div;};
		this.getInnerInput=function(){return this.innerInput;};
	},
	transfer:function(placeholder){
		this.createDiv();
		if(placeholder){
			this.placeholder=placeholder;
		}
		if(this.placeholder){
			Element.replace(this.placeholder,this.getDiv());
		}
	},
	createDiv:function(){
		this.div=document.createElement("DIV");
		this.div.className=this.divClassName;
		if(this.isIE){
			this.div.style.display="inline";
		}else{
			this.div.style.display="inline-block";
		}
		this.createInnerInputAndDiv();
		this.div.appendChild(this.popdiv);
		this.div.appendChild(this.innerInput);
	},
	createInnerInputAndDiv:function(){

		this.innerInput = null;
		if(this.isIE){
			this.innerInput = document.createElement("<input type='hidden' name='"+this.name+"'>");
		}else{
			this.innerInput = document.createElement("INPUT");
			this.innerInput.type = "hidden";
			this.innerInput.setAttribute("name",this.name);
		}
		this.innerInput.id = this.id;
		
		this.popdiv = document.createElement("div");
		this.popdiv.className = this.poPDivClassName;
		this.popdiv.style.position = "absolute";
		this.popdiv.style.top = "80px";
		this.popdiv.style.display = "none";
		
		var boxdiv = document.createElement("div");
		boxdiv.className = this.boxDivClassName;
		var ul = document.createElement("ul");
		ul.className = this.listDivClassName;
		
		var sortNameInput = this.innerInput;
		var $options = jQuery("select.selectChoose option");
		var form = jQuery("select.selectChoose").get(0).form;
		var tmpli = null;
		var showSortName = "";
		var clickFn = this.onChangeEvent;
		
		var divParent = this;
		for (var i = 0; i < $options.length; i++) {
			tmpli = document.createElement("li");
			if($options.eq(i).attr("selected")){
				showSortName = $options.eq(i).html();
				jQuery(tmpli).css("font-weight", "bold");
				sortNameInput.value = $options[i].getAttribute("value");
			}
				
			jQuery(tmpli).html($options.eq(i).html()).attr("sortName",$options[i].getAttribute("value")).attr("title","点击"+$options.eq(i).html())
						 .bind("click",function(){
							 sortNameInput.value = this.getAttribute("sortName");
							 if(clickFn){
								 if(Milan.navigator.isIE && parseInt(Milan.navigator.version.substring(0,1))<8)
									clickFn();
								 else 
									eval(clickFn);
							 }
						 });
			ul.appendChild(tmpli);
		}
		boxdiv.appendChild(ul);
		
		
		
		this.innerI = null;
		this.innerI = document.createElement("i");
		this.innerI.className = "icon-h ico-order";
		this.innerI.setAttribute("id","i_view_more");
		jQuery(this.innerI).attr("title",this.title).next("div").css("width",this.width==0?"auto":this.width);
		
		/* 
		this.innerB = null;
		this.innerB = document.createElement("b");
		this.innerB.setAttribute("id","b_view_more");
		this.innerB.className = "more";
		jQuery(this.innerB).css("width",this.width==0?"auto":this.width).attr("title",this.title).hide();
		var moreALink = document.createElement("a");
		moreALink.innerHTML = showSortName;
		this.innerB.appendChild(moreALink);
		*/
		
		var temppopDivclassName = this.poPDivClassName;
		var popTop = this.top;
		jQuery(this.innerI).click(function(e){
			var e = window.event||e;
			var screenX = document.body.clientWidth;
			var elesrc = e.srcElement||e.target;
			var $div = jQuery("#i_view_more").next("div");
			jQuery(this).next("div").css({top:popTop+"px",left:0}); //先定位计算实际的宽度,以供判断
			
			if(screenX-jQuery(elesrc).position().left<$div.width()){
				jQuery(this).next("div").css("left",(screenX-$div.width())).show();
			}else{
				jQuery(this).next("div").css("left",jQuery(this).position().left).show();
			}
			
			var closePannelListMore = function(evt){
				var evt = window.event||evt;
				for(var element = evt.srcElement||evt.target; element.tagName.toLowerCase()!="body"; element = element.parentNode)
					if(jQuery(element).hasClass(temppopDivclassName))
						return;
				jQuery("#i_view_more").next("div").hide();
				jQuery(document).unbind("mousedown",closePannelListMore);
			};
			jQuery(document).bind("mousedown",closePannelListMore);
		});
		
		//this.div.appendChild(this.innerB);
		this.div.appendChild(this.innerI);
		this.popdiv.appendChild(boxdiv);
	}
};
function TransSelectChooseFromDIV(){
	jQuery("select.selectChoose").each(function(i,ele){
		var sdiv = Milan.widget.SelectChoose;
		sdiv.init(ele.id);
		sdiv.setName(ele.getAttribute("name")||ele.id||"");
		sdiv.setWidth(ele.getAttribute("selectWidth")||0);
		sdiv.setTop(ele.getAttribute("top")||"40");
		sdiv.setTitle(ele.getAttribute("title")||"");
		sdiv.setOnChangeEvent(ele.getAttribute("onchange")||"");
		sdiv.setDivClassName(ele.getAttribute("divClassName")||"selectChoose");
		sdiv.setPoPDivClassName(ele.getAttribute("poPDivClassName")||"pop-select");
		sdiv.setBoxDivClassName(ele.getAttribute("boxDivClassName")||"select-box");
		sdiv.setListDivClassName(ele.getAttribute("listDivClassName")||"select-list");
		sdiv.setPlaceholder(ele);
		sdiv.transfer();
		jQuery("."+sdiv.listDivClassName).find("li").hover(function () {jQuery(this).addClass("lihover");},function () {jQuery(this).removeClass("lihover");});
	});
}